<template>
    <div class="airContent" @click.stop>
        <div class="airBox" id="cityBox">
            <div class="cityBox-cont" id="cityBoxCont">
                <ul class="cityBox-cont-head">
                    <li @click="items(key,index)" v-for="(key,index) in hotList" :class="{cityBoxContLi:key.sel}">{{key.name}}</li>
                </ul>
                <div class="cityBox-cont-hot" v-if="hot">
                    <div class="cityBox-hot-item" @click="res(key)" v-for="key in fixedList">{{key.name}}</div>
                </div>
                <div class="cityBox-cont-item" v-if="!hot">
                    <div class="cityBox-cont-ord" v-for="(key,index) in itemList" v-if="key.length!=0">
                        <div class="cityBox-cont-ti">{{index}}</div>
                        <div class="cityBox-cont-bo">
                            <div class="cityBox-cont-how" v-for="(ky,ix) in key" @click="res(ky)">{{ky.name}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    let cityDatas='';
    export default {
        data(){
            return {
                cityList:"",
                hot:1,
                fixedList:[
                    {name:'成都',code:'ZUUU'},
                    {name:'北京',code:'ZBAA'},
                    {name:'上海',code:'ZSPD'},
                    {name:'深圳',code:'ZGSZ'},
                    {name:'广州',code:'ZGGG'},
                    {name:'重庆',code:'ZUCK'},
                    {name:'武汉',code:'ZHHH'},
                    {name:'南京',code:'ZSNJ'},
                    {name:'昆明',code:'ZPPP'},
                    {name:'贵阳',code:'ZUGY'},
                    {name:'西安',code:'ZLXY'},
                    {name:'厦门',code:'ZSAM'},
                    {name:'福州',code:'ZSFZ'},
                    {name:'青岛',code:'ZSQD'},
                    {name:'三亚',code:'ZJSY'},
                    {name:'天津',code:'ZBTJ'}
                ],
                hotList:[
                    {
                        name:'国内热门',
                        sel:1,
                        all:1
                    },
                    {
                        name:'ABCD',
                        sel:0,
                        all:0
                    },
                    {
                        name:'EFGH',
                        sel:0,
                        all:0
                    },
                    {
                        name:'IJKL',
                        sel:0,
                        all:0
                    },
                    {
                        name:'MNOP',
                        sel:0,
                        all:0
                    },
                    {
                        name:'QRST',
                        sel:0,
                        all:0
                    },
                    {
                        name:'UVWXYZ',
                        sel:0,
                        all:0
                    }
                ],
                itemList:{}
            }
        },
        methods:{
            items:function(clas,index){
                if(index==0){
                    this.hot=1;
                    this.hotList.forEach((val)=>{
                        if(val.all==0){
                            val.sel=0;
                        }else {
                            val.sel=1;
                        }
                    })
                }else {
                    this.hot=0;
                    this.hotList.forEach((val)=>{
                        if(val.name!=clas.name){
                            val.sel=0;
                        }else {
                            val.sel=1;
                        }
                    });
                    let arr={};
                    clas.name.split("").forEach((val)=>{
                        arr[val]=[];
                    });
                    cityDatas.forEach((vals)=>{
                        if(clas.name.indexOf(vals.py.substr(0,1))!=-1){
                            arr[vals.py.substr(0,1)].push(vals)
                        }
                    });
                    this.itemList=arr;
                }
            },
            res:function (city) {
                this.$emit('information', city);
            }
        },
        mounted:function () {
            cityDatas=JSON.parse(sessionStorage.getItem('cityData'));
        }
    }
</script>
<style scoped>
    .cityBox-cont-item{
        margin-top: 15px;
    }
    .cityBox-cont-ord{
        overflow:hidden;
    }
    .cityBox-cont-bo{
        float: left;
        color: white;
    }
    .cityBox-cont-ti{
        float: left;
        width: 10px;
        text-align: center;
        height: 18px;
        line-height: 18px;
        color: white;
        margin: 0px 5px 0px 0px;
        font-size:12px;
    }
    .cityBox-cont-how{
        /*float: left;*/
        /*margin: 2px 3px;*/
        /*height: 16px;*/
        /*line-height: 16px;*/
        /*font-size: 12px;*/
        /*padding: 0px 2px;*/
        cursor: pointer;
    }
    .cityBox-hot-item,.cityBox-cont-how{
        display: inline-block;
        padding: 2px 4px 2px 4px;
        color:white;
        font-size:12px;
    }
    .cityBox-hot-item:hover,.cityBox-cont-how:hover{
        background-color: #273562;
        cursor: pointer;
        background: -webkit-gradient(linear, 0% 0%, 0% 100%,from(#1f4279), to(#273562));
        background: -moz-linear-gradient(top, #1f4279, #273562);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1f4279', endColorstr='#273562');
    }
    .cityBox-cont-hot{
        margin-top: 10px;
    }
    .cityBox-cont-head{

    }
    .cityBox-cont-head>li{
        display:inline-block;
        height: 27px;
        line-height:30px;
        color:white;
        font-size:12px;
        width: 50px;
        padding:0px 10px 0px 10px;
        border-bottom:3px solid transparent;
        text-align: center;
        cursor: pointer;
    }
    .cityBox-cont-head>li:hover{
        background: -webkit-gradient(linear, 0% 0%, 0% 100%,from(#224974), to(#273564));
        background: -moz-linear-gradient(top, #224974, #273564);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#224974', endColorstr='#273564');
    }
    .cityBoxContLi{
        background: -webkit-gradient(linear, 0% 0%, 0% 100%,from(#224974), to(#273564));
        background: -moz-linear-gradient(top, #224974, #273564);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#224974', endColorstr='#273564');
    }
    .cityBox-cont{
        height: auto;
        padding: 10px;
    }
    .airContent,.airBox{
        height: auto !important;
        font-size:12px;
    }
</style>